<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import ModalComments from '@/components/Modal/index.vue'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
import 'dayjs/locale/zh-cn'
import moment from 'moment'
import {
  timeFormat,
  timeFormatYMD,
  timeFormat_2,
  timeStamp,
  toYuan,
  regYuanToFen,
} from '@/hooks/util'
import * as commentApi from '@/api/comment'
import * as accountApi from '@/api/account'
import dayjs from 'dayjs'
const route = useRoute()
const formRef = ref()
const modalFlag = ref()
interface Pagination {
  page: number
  pageSize: number
  total: number
  current?: number
  onChange: Function
  showSizeChanger: boolean
  showQuickJumper: boolean
}

const handlePageChange = (page: any, pageSize: any) => {
  // console.log(page, pageSize)
  pagination.value.pageSize = pageSize
  searchParams.value.pageSize = pageSize
}

const pagination = ref<Pagination>({
  page: 1,
  pageSize: 10,
  total: 0,
  onChange: handlePageChange,
  showSizeChanger: true,
  showQuickJumper: true,
})
let loading = ref<boolean>(false)

interface SearchParams {
  currentPage: number
  pageSize: number
  orderNumber?: string | undefined
  robotId?: string | undefined
  buyerUserNick?: string | undefined
  buyerRateState?: string
  buyerRateExistState?: string | number
  sellerRateExistState?: string | number
  sellerRateState?: string | number
  itemId?: string | number
}
const searchParams = ref<SearchParams>({
  currentPage: pagination.value.page,
  pageSize: pagination.value.pageSize,
})
const dataSource1 = ref([])
const columns1 = [
  {
    title: '-',
    key: 'radio',
    width: 120,
    algin: 'center',
  },
  // // {
  //   title: 'ID',
  //   key: 'id',
  //   width: 180,
  //   algin: 'center',
  // },
  {
    title: '模板内容',
    key: 'content',
    width: 250,
    algin: 'center',
  },
  {
    title: '操作',
    key: 'action',
    width: 150,
    fixed: 'right',
  },
]
const columns2 = [
  // {
  //   title: '-',
  //   key: 'radio',
  //   width: 120,
  //   algin: 'center',
  // },
  // // {
  //   title: 'ID',
  //   key: 'id',
  //   width: 180,
  //   algin: 'center',
  // },
  {
    title: '模板内容',
    key: 'content',
    width: 250,
    algin: 'center',
  },
  {
    title: '操作',
    key: 'action',
    width: 150,
    fixed: 'right',
  },
]

const dataSource = ref([])
const columns = [
  {
    title: '订单号',
    key: 'orderNumber',
    width: 300,
  },
  {
    title: '卖家评价',
    key: 'sellerFeedback',
    width: 200,
  },

  {
    title: '买家评价',
    key: 'buyerFeedback',
    width: 200,
  },

  {
    title: '买家用户昵称', //（中评：-1，差评：0，好评：1）
    key: 'buyerUserNick',
    width: 200,
  },
  {
    title: '商品图片',
    key: 'productPic',
    width: 200,
  },
  {
    title: '商品标题',
    key: 'productTitle',
    width: 200,
  },

  {
    title: '实收金额',
    key: 'payment',
    width: 200,
  },
  {
    title: '付款时间',
    key: 'orderPayTime',
    width: 200,
  },
  {
    title: '交易成功时间',
    key: 'orderEndTime',
    width: 200,
  },

  {
    title: '操作',
    key: 'action',
    width: 150,
    fixed: 'right',
  },
]

interface FormState {
  orderNumber?: string | undefined
  robotId?: string | undefined
  buyerUserNick?: string | undefined
  buyerRateState?: string | undefined
  sellerRateExistState?: string | number
  buyerRateExistState?: string | number
  itemId?: string | number
  sellerRateState?: string | number
  time1?: string | number
  orderEndTimeSwitch?: string | number | boolean
  sellerRateCreateTimeSwitch?: string | number | boolean
  orderPayTimeSwitch?: string | number | boolean
}
const formState = reactive<FormState>({
  orderEndTimeSwitch: true,
})

onMounted(() => {
  setDefaultDateRange()
  setTimeout(() => {
    getList(1)
  }, 1000)

  getRobatList()
})
const search = () => {
  pagination.value.current = 1
  searchParams.value.currentPage = 1
  formRef.value.validate().then(() => {
    searchParams.value.orderNumber = formState.orderNumber || ''
    searchParams.value.robotId = formState.robotId || ''
    searchParams.value.buyerUserNick = formState.buyerUserNick || ''
    searchParams.value.buyerRateState = formState.buyerRateState
    searchParams.value.buyerRateExistState = formState.buyerRateExistState
    searchParams.value.sellerRateExistState = formState.sellerRateExistState
    searchParams.value.sellerRateState = formState.sellerRateState
    searchParams.value.itemId = formState.itemId
    searchParams.value.startTime = startTime.value
    searchParams.value.endTime = endTime.value
    //

    getList()
  })
}

// 重置
const reset = () => {
  pagination.value.current = 1
  searchParams.value.currentPage = 1
  formState.robotId = ''
  formRef.value.resetFields()
  Reflect.deleteProperty(searchParams.value, 'orderNumber')
  Reflect.deleteProperty(searchParams.value, 'robotId')
  Reflect.deleteProperty(searchParams.value, 'buyerUserNick')
  Reflect.deleteProperty(searchParams.value, 'buyerRateState')
  Reflect.deleteProperty(searchParams.value, 'buyerRateExistState')
  Reflect.deleteProperty(searchParams.value, 'sellerRateExistState')
  Reflect.deleteProperty(searchParams.value, 'sellerRateState')
  Reflect.deleteProperty(searchParams.value, 'itemId')

  getList()
}

// 表格多选
const selectedRowKey = ref<Array<any>>([])
const selectedRow = ref<Array<object>>([])
const onSelectChange = (selectedRowKeys: any[], selectedRows: any[]) => {
  selectedRowKey.value = selectedRowKeys
  selectedRow.value = selectedRows

  console.log(selectedRowKeys, selectedRows)
}

const selectedRowKey1 = ref<Array<any>>([])
const selectedRow1 = ref<Array<object>>([])
const onSelectChange1 = (selectedRowKeys: any[], selectedRows: any[]) => {
  console.log(selectedRowKeys, selectedRows, 'selectedRowKeys,selectedRows,')

  selectedRow1.value = []
  selectedRowKey1.value = []
  selectedRowKey1.value.push(selectedRowKeys[0])
  selectedRow1.value.push(selectedRows[0])
}

// 翻页
const changePage = (e: any) => {
  pagination.value.current = e.current
  pagination.value.pageSize = e.pageSize
  searchParams.value.currentPage = pagination.value.current as number
  getList()
}

const getList = async (status = 0) => {
  loading.value = true

  searchParams.value.startTime = new Date(
    moment(dateArr.value[0]).format('YYYY-MM-DD 00:00:00'),
  ).getTime()
  searchParams.value.endTime = new Date(
    moment(dateArr.value[1]).format('YYYY-MM-DD 23:59:59'),
  ).getTime() //改为完整的时间
  if (status == 1) {
    searchParams.value.orderEndTimeSwitch = true
  }

  try {
    let { state, data, message: msg } = await commentApi.getOrderRateList(searchParams.value)
    if (state === 200) {
      dataSource.value = data.list
      pagination.value.total = Number(data.totalCount)
    } else {
      message.error(msg)
    }
  } catch (error) {
    console.log(error, 'error')

    message.error('网络请求连接失败~')
  }
  loading.value = false
}
const GetRowClassName = () => {
  return 'ant-table-cell-row-hover'
}
const commentState = ref(0) //评价是追评还是首评 0首评 1追评
const itemInfo = ref({}) //订单评价是的档条信息
const orderShow = (item: any, state) => {
  //订单显示
  commentState.value = state
  itemInfo.value = item
  commentParams.value.orderNumber = item.orderNumber

  getTemplateList()
  modalFlag.value.setVisible(true)
}
const commentParams = ref({
  content: '',
  orderNumber: 0,
  rate: 1,
})

//订单评价
const commentByConfirm = async () => {
  console.log(activeKey.value, 'activeKey.value')
  if (activeKey.value == '1') {
    if (!CustomReviewsValues.value) {
      return message.error('请输入评价内容')
    }
    commentParams.value.content = CustomReviewsValues.value
    commentParams.value.id = itemInfo.value.id
  } else {
    if (!radioSelectedValue.value) {
      return message.error('请选择评价内容')
    }
    commentParams.value.content = radioSelectedValue.value
    commentParams.value.id = itemInfo.value.id
  }

  if (commentState == 0) {
    try {
      let { state, data, message: msg } = await commentApi.FirstRate(commentParams.value)
      if (state === 200) {
        message.success('评价成功')
        modalFlag.value.setVisible(false)
      } else {
        message.error(msg)
      }
    } catch (error) {
      message.error('网络请求连接失败~')
    }
  } else {
    try {
      let { state, data, message: msg } = await commentApi.PursueRate(commentParams.value)
      if (state === 200) {
        message.success('追加评价成功')
        modalFlag.value.setVisible(false)
      } else {
        message.error(msg)
      }
    } catch (error) {
      message.error('网络请求连接失败~')
    }
  }
}
const activeKey = ref('1')

const CustomReviewsValues = ref('') //自定义评价
const BuyerRatingList = ref([
  {
    label: '好评',
    value: 1,
  },
  {
    label: '中评',
    value: -1,
  },
  {
    label: '差评',
    value: 0,
  },
])

const buyerRateExistStateList = ref([
  {
    label: '待评价',
    value: 0,
  },
  {
    label: '已评价',
    value: 1,
  },
])

// 拉取机器人列表
let okRobat = ref<string>()
import type { SelectProps } from 'ant-design-vue'
const robatList = ref<SelectProps['options']>([])
interface OptionList {
  label: string
  value: string
}
let optionList = ref<Array<OptionList>>([])
const getRobatList = async () => {
  const params = { currentPage: 1, pageSize: 100 }
  try {
    let { state, data, message: msg } = await accountApi.getFishRobotList(params)
    if (state === 200) {
      robatList.value = data.list
      optionList.value = data.list.map((item: any) => {
        return {
          label: item.nickName,
          value: item.id,
        }
      })

      data.list.forEach((item: any) => {
        yzDataList.value.push({
          id: item.id,
          countDownTime: 60,
          timer: null,
          countDownIng: false,
        })
      })
      yzDataList.value.forEach(item => {
        clearTimerForRobotId(item.id)
      })
      initCountDown(data.list[0].id)
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

//时间选择
const TimeExistStateList = ref([
  {
    label: '交易成功时间',
    value: 'orderEndTimeSwitch',
  },
  {
    label: '卖家评价时间',
    value: 'sellerRateCreateTimeSwitch',
  },
  {
    label: '付款时间',
    value: 'orderPayTimeSwitch',
  },
])

const sellerCommentState = ref([
  {
    label: '待评价',
    value: 0,
  },
  {
    label: '已评价',
    value: 1,
  },
])
const selectTimeType = ref('orderEndTimeSwitch')
const onSelectTimeType = (value: any) => {
  console.log(value, 'value')
  if (value == 'orderEndTimeSwitch') {
    searchParams.value.orderEndTimeSwitch = true
    delete searchParams.value.orderPayTimeSwitch
    delete searchParams.value.sellerRateCreateTimeSwitch
  } else if (value == 'sellerRateCreateTimeSwitch') {
    searchParams.value.sellerRateCreateTimeSwitch = true
    delete searchParams.value.orderEndTimeSwitch
    delete searchParams.value.orderPayTimeSwitch
  } else {
    searchParams.value.orderPayTimeSwitch = true
    delete searchParams.value.orderEndTimeSwitch
    delete searchParams.value.sellerRateCreateTimeSwitch
  }
}

// select搜索
const filterOption = (input: string, option: any) => {
  return option.label.indexOf(input) >= 0
}
const selectRobat = (selectValue: any) => {
  okRobat.value = selectValue as string
  formState.robotId = okRobat.value
  clearTimerForRobotId(okRobat.value as string)
  initCountDown(selectValue as string)
}
const selectedIndex = ref(0)
const selectedComment = ref([
  {
    icon: 'https://goofish.pro/img/good-icon.9135ea72.png',
    text: '给好评',
    id: 1,
    selected: false,
  },
  {
    icon: 'https://goofish.pro/img/medium-icon.6e5b5832.png',
    text: '给中评',
    id: -1,
    selected: false,
  },
  {
    icon: 'https://goofish.pro/img/bad-icon.efa8d341.png',
    text: '给差评',
    id: 0,
    selected: false,
  },
])

const handleChangeSelected = (item, index) => {
  selectedIndex.value = index
  commentParams.value.rate = item.id
}
const templateList = ref([[]])
//获取模板
interface Pagination1 {
  page: number
  pageSize: number
  total: number
  current?: number
  onChange: Function
  showSizeChanger: boolean
  showQuickJumper: boolean
}

const handlePageChange1 = (page: any, pageSize: any) => {
  // console.log(page, pageSize)
  pagination.value.pageSize = pageSize
}

const pagination1 = ref<Pagination1>({
  page: 1,
  pageSize: 10,
  total: 0,
  onChange: handlePageChange1,
  showSizeChanger: true,
  showQuickJumper: true,
})

const templatePage = ref({
  currentPage: pagination.value.page,
  pageSize: pagination.value.pageSize,
})
//获取模板
const getTemplateList = async () => {
  try {
    const result = await commentApi.getTemplateList(templatePage.value)
    if (result.state == 200) {
      let arr = []
      result.data.list.forEach(item => {
        item.radioFlag = false
      })
      dataSource1.value = result.data.list

      pagination1.value.total = Number(result.data.totalCount)
    }
  } catch (err) {
    message.error('网络请求连接失败~')
  }
}

// 翻页
const changePage1 = (e: any) => {
  pagination1.value.current = e.current
  pagination1.value.pageSize = e.pageSize
  templatePage.value.currentPage = pagination1.value.current as number
  getTemplateList()
}

const templateFrom = ref({
  content: '',
})
const addModalFlag = ref()
const ModalState = ref(0)
const modalTitle = ref('新增模板')

//新增模板
const addTemplate = () => {
  ModalState.value = 0
  modalTitle.value = '新增模板'
  templateFrom.value.content = ''
  delete templateFrom.value.id

  addModalFlag?.value.setVisible(true)
}
const addTemplateConfirm = async () => {
  if (ModalState.value == 0) {
    try {
      const result = await commentApi.addRateTemplate(templateFrom.value)
      if (result.state == 200) {
        message.success('添加成功~')
        getTemplateList()
        addModalFlag?.value.setVisible(false)
      } else {
        message.error(result.message)
      }
    } catch (err) {
      message.error('网络请求连接失败~')
    }
  } else {
    try {
      const result = await commentApi.editTemplate(templateFrom.value)
      if (result.state == 200) {
        message.success('修改成功~')
        getTemplateList()
        addModalFlag?.value.setVisible(false)
      } else {
        message.error(result.message)
      }
    } catch (err) {
      message.error('网络请求连接失败~')
    }
  }
}
// delTemplate
// editTemplate
//删除模板
const deleteTemplate = async (item: any) => {
  try {
    const result = await commentApi.delTemplate({ id: item.id })
    if (result.state == 200) {
      message.success('删除成功~')
      getTemplateList()
    } else {
      message.error(result.message)
    }
  } catch (err) {
    message.error('网络请求连接失败~')
  }
}

//编辑模板
const EditTemplate = (item: any) => {
  ModalState.value = 1
  modalTitle.value = '编辑模板'
  templateFrom.value.content = item.content
  templateFrom.value.id = item.id
  addModalFlag?.value.setVisible(true)
}

const selectedRowVlaue = ref(null)
const radioSelectedValue = ref('')
const handleRadioChange = item => {
  console.log(item, 'item')

  selectedRowVlaue.value = item.id
  radioSelectedValue.value = item.content
  console.log(selectedRowKey, 'selectedRowKey')

  // 你可以在这里添加其他逻辑，比如根据选中的行执行某些操作
}
const dateArr = ref<string[]>([])
const dateList = ref<[Dayjs, Dayjs]>([
  dayjs().subtract(30, 'days').startOf('day'),
  dayjs().endOf('day'),
])

const startTime = ref<number>(0)
const endTime = ref<number>(0)

// Initialize the default date range
const setDefaultDateRange = () => {
  const endDate = dayjs().endOf('day')
  const startDate = endDate.subtract(30, 'days').startOf('day')

  dateList.value = [startDate, endDate]
  startTime.value = startDate.valueOf()
  endTime.value = endDate.valueOf()
  dateArr.value = [startDate.format('YYYY-MM-DD'), endDate.format('YYYY-MM-DD')]
}

const disabledDate = (current: Dayjs) => {
  const today = dayjs().endOf('day')
  const diffDays = current.diff(today, 'days')
  return diffDays < -30 || diffDays > 0
}

const onTimeChange = (dates: [Dayjs, Dayjs], dateStrings: [string, string]) => {
  if (dates && dates.length === 2) {
    dateList.value = dates
    startTime.value = dates[0].startOf('day').valueOf()
    endTime.value = dates[1].endOf('day').valueOf()
    dateArr.value = dateStrings
  }
}

getTemplateList()
//
const BindBotFlagRef = ref(false)

const BindBotFlagConfirm = () => {}

// 拉取机器人列表
// let okRobat = ref<string>()
import type { SelectProps } from 'ant-design-vue'

const selectRobat1 = (selectValue: any) => {
  console.log(selectValue, 'selectValue')

  okRobat.value = selectValue
  if (okRobat.value == undefined) {
    templatePage.value.currentPage = 1
    templatePage.value.pageSize = 10
    goodChecked.value = false

    getTemplateList()
    return
  }

  pullTemplateList()
}
//拉取模板
const pullTemplateList = async () => {
  try {
    const result = await commentApi.pullTemplateList({ robotId: okRobat.value })
    if (result.state == 200) {
      dataSource1.value = result.data.robotRateTemplateList
      goodChecked.value = result.data.state ? true : false
    } else {
      message.error(result.message)
    }
  } catch (err) {}
}

// 推送配置
let sendRobat = ref<string>()
const selectSendRobat1 = (selectValue: any) => {
  sendRobat.value = selectValue
  console.log(sendRobat.value, ' sendRobat.value ')

  // console.log('sendRobat.value=', sendRobat.value)
}
const pushRobot = async () => {
  const params = {
    robotIds: sendRobat.value,
    state: goodChecked.value ? 1 : 0,
    templateIdList: selectedRowKey.value,
  }
  try {
    let { state, message: msg } = await commentApi.PushTemplateList(params)
    if (state === 200) {
      message.success('推送成功')
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const sendOk = () => pushRobot()
const openBindBotFlag = () => {
  templatePage.value.currentPage = 1
  templatePage.value.pageSize = 100
  getTemplateList()
  BindBotFlagRef.value.setVisible(true)
}

const goodChecked = ref(false)

const yzData = reactive({
  countDownTime: 60,
  timer: null,
  countDownIng: false,
})
const STORAGE_KEY_PREFIX = 'SynchronizeCommentTime-'
const resultYzData = ref({})
const yzDataList = ref([])
//获取验证码倒计时
const countDown = (robotId: any) => {
  let item: any = getCurrentItem(robotId)
  let startTime = localStorage.getItem(STORAGE_KEY_PREFIX + robotId)
  let nowTime = new Date().getTime()

  if (startTime) {
    let surplus = 60 - parseInt((nowTime - parseInt(startTime)) / 1000, 10)
    item.countDownTime = surplus <= 0 ? 0 : surplus
  } else {
    item.countDownTime = 60
    localStorage.setItem(STORAGE_KEY_PREFIX + robotId, nowTime.toString())
  }

  item.timer = setInterval(() => {
    item.countDownTime--
    item.countDownIng = true
    if (item.countDownTime <= 0) {
      localStorage.removeItem(STORAGE_KEY_PREFIX + robotId)
      clearInterval(item.timer)
      item.countDownTime = 60
      item.countDownIng = false
    }
  }, 1000)
}

// 清除与指定robotId关联的定时器
const clearTimerForRobotId = (robotId: string) => {
  const item = yzDataList.value.find(item => item.id === robotId)
  if (item && item.timer) {
    clearInterval(item.timer)
    item.timer = null
  }
}
const initCountDown = (robotId: any) => {
  clearTimerForRobotId(robotId)
  let startTime = localStorage.getItem(STORAGE_KEY_PREFIX + robotId)
  let item: any = getCurrentItem(robotId)

  if (startTime) {
    item.countDownIng = true
    countDown(robotId)
  } else {
    resetItemCountDown(item)
  }
}
//获取默认的倒计时item
const getCurrentItem = (robotId: any) => {
  let item: any = yzDataList.value.find(item => item.id === robotId)
  if (!item) {
    item = reactive({ ...yzData, id: robotId }) // 使用新的ID创建一个新的倒计时对象
    yzDataList.value.push(item) // 添加到列表中，如果需要的话
  }
  resultYzData.value = item // 更新当前选中的倒计时对象
  return item
}
//重置倒计时的使劲按 清楚倒计时
const resetItemCountDown = (item: any) => {
  item.countDownTime = 60
  item.countDownIng = false
  if (item.timer) {
    clearInterval(item.timer)
    item.timer = null
  }
}
const syncRobotProduct = async () => {
  let parmas = {
    robotId: okRobat.value,
  }
  try {
    let { state, data, message: msg } = await commentApi.synchronousOrderRate(parmas)
    if (state === 200) {
      getList()
      message.success({
        content: '提交同步评价任务成功，请您稍等1-2分钟后刷新查看！',
        duration: 5,
      })
      countDown(okRobat.value)
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

const DetailFlagRef = ref(null)
const DetailInfo = ref({})
// 获取详情
const showDetail = async record => {
  const result = await commentApi.getOrderRateInfo({
    orderNumber: record.orderNumber,
    // robotId: record.robotId,
  })
  console.log(result, 'resultresult')
  if (result.state == 200) {
    DetailInfo.value = result.data
  }

  DetailFlagRef.value.setVisible(true)
}

const DetailFlagConfirm = () => {
  DetailFlagRef.value.setVisible(false)
}
</script>

<template>
  <a-card :bordered="false">
    <!-- 评价详情 -->
    <ModalComments
      ref="DetailFlagRef"
      :width="600"
      :height="400"
      title="详情"
      :btnShow="true"
      @onConfirmAdd="DetailFlagConfirm"
    >
      <template #contentValue>
        <div class="comments-goods">
          <div class="image">
            <img
              :src="DetailInfo?.productPic"
              style="width: 50px; height: 50px; border-radius: 50%"
            />
          </div>
          <div class="title">
            <div class="txt1">
              {{ DetailInfo?.productTitle }}
            </div>
            <div class="txt2">实付金额： ￥{{ toYuan(DetailInfo?.payment) }}</div>
          </div>
        </div>
        <div class="comments-List">
          <div
            class="comments-list-item"
            v-for="item in DetailInfo?.orderRateInfoList"
            :key="item.id"
          >
            <div class="title-type">{{ item.type == 0 ? '首评' : '追评' }}</div>
            <div class="buyer-box" v-if="item.buyerRateExistState == 1">
              <div class="row1">
                <div class="store-name">{{ item.buyerUserNick }}</div>
                <div class="store-tag">
                  <a-tag color="blue">买家</a-tag>
                </div>
                <div class="time">{{ timeFormat(item.buyerRateCreateTime) }}</div>
                <div class="rate">
                  <div class="rate-img" v-if="item.buyerRateState == 0">
                    <img
                      src="https://goofish.pro/img/bad-icon.efa8d341.png"
                      style="width: 20px; height: 20px; margin-right: 6px"
                    />
                    差评
                  </div>
                  <div class="rate-img" v-if="item.buyerRateState == 1">
                    <img
                      src="https://goofish.pro/img/good-icon.9135ea72.png"
                      style="width: 20px; height: 20px; margin-right: 6px"
                    />
                    好评
                  </div>
                  <div class="rate-img" v-if="item.buyerRateState == -1">
                    <img
                      src="https://goofish.pro/img/medium-icon.6e5b5832.png"
                      style="width: 20px; height: 20px; margin-right: 6px"
                    />
                    中评
                  </div>
                </div>
              </div>
              <div class="row2">
                {{ item.buyerFeedback }}
              </div>
            </div>
            <div style="border-bottom: 1px solid #eee"></div>
            <div class="seller-box" v-if="item.sellerRateExistState == 1">
              <div class="row1">
                <div class="store-name">{{ item.sellerUserNick }}</div>
                <div class="store-tag">
                  <a-tag color="orange">卖家</a-tag>
                </div>
                <div class="time">{{ timeFormat(item.sellerRateCreateTime) }}</div>

                <div class="rate">
                  <div class="rate-img" v-if="item.sellerRateState == 0">
                    <img
                      src="https://goofish.pro/img/bad-icon.efa8d341.png"
                      style="width: 20px; height: 20px; margin-right: 6px"
                    />
                    差评
                  </div>
                  <div class="rate-img" v-if="item.sellerRateState == 1">
                    <img
                      src="https://goofish.pro/img/good-icon.9135ea72.png"
                      style="width: 20px; height: 20px; margin-right: 6px"
                    />
                    好评
                  </div>
                  <div class="rate-img" v-if="item.sellerRateState == -1">
                    <img
                      src="https://goofish.pro/img/medium-icon.6e5b5832.png"
                      style="width: 20px; height: 20px; margin-right: 6px"
                    />
                    中评
                  </div>
                </div>
              </div>
              <div class="row2">
                {{ item.sellerFeedback }}
              </div>
            </div>
          </div>
        </div>
      </template>
    </ModalComments>
    <!-- 绑定机器人推送 -->
    <ModalComments
      ref="BindBotFlagRef"
      :width="600"
      :height="400"
      title="绑定模板并推送"
      :btnShow="true"
      @onConfirmAdd="BindBotFlagConfirm"
    >
      <template #contentValue>
        <div>
          <div
            style="
              margin: 15px 0;
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <div style="display: flex; justify-content: space-between; align-items: center">
              <a @click="addTemplate">新增评价模版</a>
            </div>
            <div>
              <span>选择闲鱼账号：</span>
              <a-select
                allowClear
                v-model:value="okRobat"
                @change="selectRobat1"
                placeholder="请选择"
                style="width: 150px; text-align: left"
              >
                <a-select-option v-for="(item, index) in robatList" :key="index" :value="item.id">
                  {{ item.nickName }}
                </a-select-option>
              </a-select>
            </div>
          </div>
          <a-table
            :columns="columns2"
            class="ant-table-striped"
            :scroll="{ y: 250 }"
            style="overflow-y: scroll"
            :data-source="dataSource1"
            :pagination="pagination1"
            :loading="loading"
            @change="changePage1"
            size="small"
            rowKey="id"
            :row-selection="{ selectedRowKeys: selectedRowKey, onChange: onSelectChange }"
            :rowClassName="GetRowClassName"
          >
            <template #emptyText>
              <a-empty description=" 暂无数据" />
            </template>

            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'radio'"></template>

              <template v-if="column.key === 'content'">
                {{ record.content }}
              </template>
              <template v-if="column.key === 'id'">
                {{ record.id }}
              </template>

              <template v-else-if="column.key === 'action'">
                <a @click="deleteTemplate(record)">删除</a>
                <a @click="EditTemplate(record)" style="margin-left: 10px">编辑</a>
              </template>
            </template>
          </a-table>

          <div style="margin: 15px 0">
            <div style="display: flex; align-items: center">
              <span style="margin-right: 10px">自动好评:</span>
              <a-switch v-model:checked="goodChecked" />
            </div>
            <div style="color: #999999; margin-top: 5px; font-size: 14px">
              当订单交易成功后将使用上述勾选模版随机进行评价
            </div>

            <div style="margin-top: 20px">
              <span>选择推送平台账号：</span>
              <a-select
                mode="multiple"
                v-model:value="sendRobat"
                @change="selectSendRobat1"
                placeholder="请选择"
                style="width: 150px; text-align: left"
              >
                <a-select-option v-for="(item, index) in robatList" :key="index" :value="item.id">
                  {{ item.nickName }}
                </a-select-option>
              </a-select>
              <a-button
                type="primary"
                style="margin-left: 10px; border-radius: 6px"
                @click="sendOk"
              >
                确认推送
              </a-button>
            </div>
          </div>
        </div>
      </template>
    </ModalComments>
    <!-- 新增模板的弹框 -->
    <ModalComments
      ref="addModalFlag"
      :width="600"
      :height="400"
      :title="modalTitle"
      :btnShow="true"
      @onConfirmAdd="addTemplateConfirm"
    >
      <template #contentValue>
        <a-form :model="formState" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <a-form-item label="模板内容">
            <a-textarea
              v-model:value="templateFrom.content"
              showCount
              :maxCount="500"
              placeholder="聊聊本次交易感受，你的评价能帮助到其他人~"
              :rows="10"
            />
          </a-form-item>
        </a-form>
      </template>
    </ModalComments>
    <!-- 评论弹框组件 -->
    <ModalComments
      ref="modalFlag"
      :width="600"
      :height="600"
      title="评价"
      @onConfirmAdd="commentByConfirm"
      :btnShow="true"
    >
      <template #contentValue>
        <div class="comments-goods">
          <div class="image">
            <img
              :src="itemInfo?.productPic"
              style="width: 50px; height: 50px; border-radius: 50%"
            />
          </div>
          <div class="title">
            <div class="txt1">
              {{ itemInfo?.productTitle }}
            </div>
            <div class="txt2">实付金额： ￥{{ toYuan(itemInfo?.payment) }}</div>
          </div>
          <div style="margin-left: 20px">
            <a-tag color="orange" v-if="itemInfo?.sellerRateExistState == 0">买家未评价</a-tag>
            <a-tag color="blue" v-if="itemInfo?.sellerRateExistState == 1">买家已评价</a-tag>
          </div>
        </div>
        <div class="comments-content-box">
          <a-tabs v-model:activeKey="activeKey">
            <a-tab-pane key="1" tab="自定义">
              <div class="comments-content-selected-box">
                <div
                  class="comments-content-selected-item"
                  v-for="(item, index) in selectedComment"
                  :key="index"
                  :class="{ active: selectedIndex == index }"
                  @click="handleChangeSelected(item, index)"
                >
                  <div class="icon">
                    <img :src="item.icon" style="width: 35px; height: 35px; border-radius: 50%" />
                  </div>
                  <div class="txt">{{ item.text }}</div>
                </div>
              </div>
              <a-textarea
                v-model:value="CustomReviewsValues"
                showCount
                placeholder="聊聊本次交易感受，你的评价能帮助到其他人~"
                :rows="10"
              />
            </a-tab-pane>
            <a-tab-pane key="2" tab="单个模版" force-render>
              <div class="comments-content-selected-box">
                <div
                  class="comments-content-selected-item"
                  v-for="(item, index) in selectedComment"
                  :key="index"
                  :class="{ active: selectedIndex == index }"
                  @click="handleChangeSelected(item, index)"
                >
                  <div class="icon">
                    <img :src="item.icon" style="width: 35px; height: 35px; border-radius: 50%" />
                  </div>
                  <div class="txt">{{ item.text }}</div>
                </div>
              </div>
              <div class="setting-box">
                <a @click="addTemplate">新增评价模版</a>
              </div>
              <a-table
                :scroll="{ y: 250 }"
                style="overflow-y: scroll"
                :columns="columns1"
                class="ant-table-striped"
                :data-source="dataSource1"
                rowKey="id"
                :pagination="pagination1"
                :loading="loading"
                @change="changePage1"
                size="small"
              >
                <template #emptyText>
                  <a-empty description=" 暂无数据" />
                </template>

                <template #bodyCell="{ column, record }">
                  <template v-if="column.key === 'radio'">
                    <a-radio
                      :checked="selectedRowVlaue === record.id"
                      @change="() => handleRadioChange(record)"
                    ></a-radio>
                  </template>

                  <template v-if="column.key === 'content'">
                    {{ record.content }}
                  </template>
                  <template v-if="column.key === 'id'">
                    {{ record.id }}
                  </template>

                  <template v-else-if="column.key === 'action'">
                    <a @click="deleteTemplate(record)">删除</a>
                    <a @click="EditTemplate(record)" style="margin-left: 10px">编辑</a>
                  </template>
                </template>
              </a-table>
            </a-tab-pane>
          </a-tabs>
        </div>
      </template>
    </ModalComments>
    <div class="search-container">
      <a-form ref="formRef" layout="inline" :model="formState" class="formClass">
        <a-form-item label="闲鱼账号" name="groupId" style="padding: 5px">
          <a-select
            v-model:value="formState.robotId"
            @change="selectRobat"
            placeholder="请选择"
            style="width: 180px; text-align: left"
            show-search
            :options="optionList"
            :filter-option="filterOption"
          >
            <a-select-option v-for="(item, index) in optionList" :key="index" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="商品ID" name="itemId" style="padding: 5px">
          <a-input v-model:value="formState.itemId" placeholder="商品ID" style="width: 180px" />
        </a-form-item>
        <a-form-item label="买家用户昵称" name="buyerUserNick">
          <a-input
            v-model:value="formState.buyerUserNick"
            placeholder="买家用户昵称"
            style="width: 180px"
          />
        </a-form-item>
        <a-form-item label="闲鱼订单号" name="orderNumber" style="padding: 5px">
          <a-input
            v-model:value="formState.orderNumber"
            placeholder="闲鱼订单号"
            style="width: 180px"
          />
        </a-form-item>
        <a-form-item label="买家评价等级" name="buyerRateState" style="padding: 5px">
          <a-select
            v-model:value="formState.buyerRateState"
            placeholder="请选择"
            style="width: 180px"
            allowClear
          >
            <a-select-option
              v-for="(item, index) in BuyerRatingList"
              :key="index"
              :value="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="卖家评价等级" name="sellerRateState" style="padding: 5px">
          <a-select
            v-model:value="formState.sellerRateState"
            placeholder="请选择"
            style="width: 180px"
            allowClear
          >
            <a-select-option
              v-for="(item, index) in BuyerRatingList"
              :key="index"
              :value="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="买家评价状态" name="buyerRateExistState" style="padding: 5px">
          <a-select
            v-model:value="formState.buyerRateExistState"
            placeholder="请选择"
            style="width: 180px"
            allowClear
          >
            <a-select-option
              v-for="(item, index) in buyerRateExistStateList"
              :key="index"
              :value="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="卖家评价状态" name="sellerRateExistState" style="padding: 5px">
          <a-select
            v-model:value="formState.sellerRateExistState"
            placeholder="请选择"
            style="width: 180px"
            allowClear
          >
            <a-select-option
              v-for="(item, index) in sellerCommentState"
              :key="index"
              :value="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="时间选择" name="TimeSeleceted" style="padding: 5px">
          <a-select
            v-model:value="selectTimeType"
            placeholder="请选择"
            style="width: 180px"
            allowClear
            @change="onSelectTimeType"
          >
            <a-select-option
              v-for="(item, index) in TimeExistStateList"
              :key="index"
              :value="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="时间段" name="time1" style="padding: 5px">
          <div>
            <a-range-picker
              :disabledDate="disabledDate"
              v-model:value="dateList"
              @change="onTimeChange"
              dateFormat="YYYY-MM-DD"
            />
          </div>
        </a-form-item>
        <a-form-item style="padding: 5px">
          <div>
            <a-button type="primary" @click="search">搜索</a-button>
            <a-button @click="reset" style="margin-left: 5px">重置</a-button>

            <a-button type="primary" @click="openBindBotFlag" style="margin-left: 5px">
              自动评价设置
            </a-button>
          </div>
        </a-form-item>
        <a-form-item style="padding: 5px">
          <div>
            <a-button
              type="primary"
              @click="syncRobotProduct"
              :disabled="resultYzData.countDownIng || !okRobat"
            >
              {{
                resultYzData.countDownIng
                  ? `同步当前闲鱼评价 ${resultYzData.countDownTime}`
                  : '同步当前闲鱼评价'
              }}
            </a-button>
          </div>
        </a-form-item>
      </a-form>
    </div>

    <a-table
      style="overflow-x: scroll"
      :columns="columns"
      class="ant-table-striped"
      :scroll="{ x: 100 }"
      :data-source="dataSource"
      :pagination="pagination"
      :loading="loading"
      @change="changePage"
      size="small"
    >
      <template #emptyText>
        <a-empty description=" 暂无数据" />
      </template>

      <template #headerCell="{ column }">
        <template v-if="column.key === 'id'">
          <span>ID</span>
        </template>
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'productTitle'">
          <div>{{ record.productTitle }}</div>
          <div>ID：{{ record.itemId }}</div>
        </template>
        <template v-if="column.key === 'orderNumber'">
          <div class="orderNumber" style="color: #1890ff; font-weight: 500">
            {{ record.orderNumber }}
          </div>
          <div class="store">
            {{ record.sellerUserNick }}
          </div>
        </template>
        <template v-if="column.key === 'productPic'">
          <div style="height: 100px">
            <img :src="record.productPic" style="width: 100px" alt="" />
          </div>
        </template>
        <template v-if="column.key === 'orderStatus'">
          <div>
            <a-tag color="blue" v-if="record.orderStatus == 0">未知状态</a-tag>
            <a-tag color="blue" v-if="record.orderStatus == 1">订单已创建</a-tag>
            <a-tag color="blue" v-if="record.orderStatus == 2">订单已付款</a-tag>
            <a-tag color="blue" v-if="record.orderStatus == 3">已发货</a-tag>
            <a-tag color="blue" v-if="record.orderStatus == 4">交易成功</a-tag>
            <a-tag color="blue" v-if="record.orderStatus == 5">已退款</a-tag>
            <a-tag color="blue" v-if="record.orderStatus == 6">交易关闭</a-tag>
            <a-tag color="blue" v-if="record.orderStatus == 7">退款中</a-tag>
          </div>
        </template>
        <template v-if="column.key === 'productStatus'">
          <div>
            <a-tag color="blue" v-if="record.productStatus == 1">未发货</a-tag>
            <a-tag color="blue" v-if="record.productStatus == 2">已发货</a-tag>
            <a-tag color="blue" v-if="record.productStatus == 3">已收货</a-tag>
            <a-tag color="blue" v-if="record.productStatus == 4">已经退货</a-tag>
            <a-tag color="blue" v-if="record.productStatus == 5">部分收货</a-tag>
            <a-tag color="blue" v-if="record.productStatus == 6">部分发货中</a-tag>
            <a-tag color="blue" v-if="record.productStatus == 8">还未创建</a-tag>
          </div>
        </template>
        <template v-if="column.key === 'payment'">
          <div>
            <span v-if="record.payment">实收：￥{{ toYuan(record.payment) }}</span>
            <span v-else>-</span>
          </div>
          <div>
            <span v-if="record.productPrice">原价：￥{{ toYuan(record.productPrice) }}</span>
            <span v-else>-</span>
          </div>
        </template>
        <template v-if="column.key === 'orderPayTime'">
          <div v-if="record.orderPayTime">
            {{ timeFormat(record.orderPayTime) }}
          </div>
          <div v-else>-</div>
        </template>
        <template v-if="column.key === 'orderEndTime'">
          <div v-if="record.orderEndTime">
            {{ timeFormat(record.orderEndTime) }}
          </div>
          <div v-else>-</div>
        </template>
        <template v-if="column.key === 'sellerFeedback'">
          <div v-if="record.sellerRateExistState">
            <div style="margin-bottom: 5px">
              <a-tag color="blue" v-if="record.sellerRateState == 1">好评</a-tag>
              <a-tag color="orange" v-if="record.sellerRateState == -1">中评</a-tag>
              <a-tag color="red" v-if="record.sellerRateState == 0">差评</a-tag>
            </div>
            <a-tooltip placement="top">
              <template #title>
                <span>{{ record.sellerFeedback }}</span>
              </template>
              <span class="hiddenText">{{ record.sellerFeedback }}</span>
            </a-tooltip>
            <div style="color: #999" v-if="record.sellerFeedback">
              {{ timeFormat(record.sellerRateCreateTime) }}
            </div>
          </div>
          <div v-else>-</div>
        </template>

        <template v-if="column.key === 'buyerFeedback'">
          <div v-if="record.buyerRateExistState">
            <div style="margin-bottom: 5px">
              <a-tag color="blue" v-if="record.buyerRateState == 1">好评</a-tag>
              <a-tag color="orange" v-if="record.buyerRateState == -1">中评</a-tag>
              <a-tag color="red" v-if="record.buyerRateState == 0">差评</a-tag>
            </div>
            <a-tooltip placement="top">
              <template #title>
                <span>{{ record.buyerFeedback }}</span>
              </template>
              <span class="hiddenText">{{ record.buyerFeedback }}</span>
            </a-tooltip>
            <div style="color: #999" v-if="record.buyerFeedback">
              {{ timeFormat(record.buyerRateCreateTime) }}
            </div>
          </div>
          <div v-else>-</div>
        </template>

        <template v-if="column.key === 'sellerUserNick'">
          {{ record.sellerUserNick }}
        </template>
        <template v-if="column.key === 'buyerUserNick'">
          <div v-if="record.buyerUserNick">{{ record.buyerUserNick }}</div>
          <div v-else>-</div>
        </template>

        <template v-else-if="column.key === 'action'">
          <div>
            <a v-if="record.sellerRateExistState == 0" @click="orderShow(record, 0)">订单评价</a>
            <a
              v-if="record.sellerRateExistState == 1 && record.buyerRateExistState == 1"
              @click="orderShow(record, 1)"
            >
              追加评价
            </a>
            <a
              style="margin-left: 10px"
              @click="showDetail(record)"
              v-if="record.sellerRateExistState == 1 || record.buyerRateExistState == 1"
            >
              详情
            </a>
          </div>
        </template>
      </template>
    </a-table>
  </a-card>
</template>

<style lang="less" scoped>
.search-container {
  margin-bottom: 20px;
}
.hiddenText {
  display: inline-block;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.comments-List {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  .comments-list-item {
    display: flex;
    flex-direction: column;
    border: 1px solid #f7f8f9;
    border-radius: 5px;
    .title-type {
      background-color: #f7f7f7;
      color: #000;
      padding: 10px;
      font-weight: 700;
    }
    .buyer-box {
      padding: 10px;
      display: flex;
      flex-direction: column;
      .row1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #999;

        .rate {
          .rate-img {
            display: flex;
            align-items: center;
          }
        }
      }
      .row2 {
        margin-top: 15px;
      }
    }
    .seller-box {
      padding: 10px;
      display: flex;
      flex-direction: column;
      .row1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #999;
        .rate {
          .rate-img {
            display: flex;
            align-items: center;
          }
        }
      }
      .row2 {
        margin-top: 15px;
      }
    }
  }
  .comments-list-item:nth-child(n + 2) {
    margin-top: 12px;
  }
}

.comments-goods {
  display: flex;
  // align-items: center;
  // justify-content: space-between;

  .image {
  }

  .title {
    margin: 0 20px;

    .txt1 {
      font-size: 14px;
      font-weight: 700;
    }

    .txt2 {
      margin-top: 10px;
      color: #999;
    }
  }
}

.comments-content-box {
  margin-top: 20px;

  .setting-box {
    margin-bottom: 20px;
  }

  .comments-content-selected-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    .comments-content-selected-item {
      flex: 1;
      padding: 5px;
      background-color: #f7f8f8;
      border-radius: 30px;
      display: flex;
      align-items: center;
      justify-self: center;

      .icon {
      }

      .txt {
        margin-left: 15px;
      }
    }

    .comments-content-selected-item:nth-child(n + 2) {
      margin-left: 15px;
    }

    .active {
      background-color: #1778ff;
      color: #f7f8f9;
    }
  }
}
</style>
